<template>
  <ExamMain @change="changeCategory">
    <div class="rollup-wrapper">
      <div class="rollup-list">
        <div class="item" v-for="item in rollupList" :key="item.id">
          <div class="content">
            <div class="title" @click="clickDetails(item.id, item.first_paper_id)">
              {{ item.title }}
            </div>
            <div class="sum">
              <span>{{ `试卷数：${item.paper_count}` }}</span>
              <span>{{ `练习人数：${item.practice_count}` }}</span>
            </div>
            <div class="intro">简介：{{ item.intro }}</div>
          </div>
          <div class="operate">
            <template v-if="item.has_bought == 0">
              <div class="price" v-if="item.user_price > 0">
                {{ item.user_price | formatMoney }}
              </div>
              <div class="free" v-else>免费</div>
            </template>
            <template v-else>
              <div class="price">已购买</div>
            </template>
            <el-button
              v-if="item.user_price > 0 && item.has_bought == 0"
              type="primary"
              size="medium"
              round
              @click="handleUserBuy(item.id)"
              >购买</el-button
            >
            <el-button
              v-else
              type="primary"
              size="medium"
              round
              @click="clickAnswer(item.id, item.first_paper_id)"
              >开始答题</el-button
            >
          </div>
        </div>
      </div>
      <div class="rollup-no-data" v-if="!loading && rollupList.length == 0">
        <EduNoData></EduNoData>
      </div>
      <EduPagination @handleCurrentChange="handleCurrentChange"></EduPagination>
    </div>
  </ExamMain>
</template>

<script>
import EduPagination from '@/components/EduPagination'
import EduNoData from '@/components/EduNoData'
import ExamMain from '../components/examMain'
export default {
  components: {
    EduPagination,
    EduNoData,
    ExamMain
  },
  data() {
    return {
      rollupList: [],
      category: 0,
      moduleId: 0,
      loading: true
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.moduleId = n.query.id
        this.category = n.query.category
        this.getRollupList()
      }
    }
  },
  created() {
    // this.getRollupList()
  },
  methods: {
    // 获取列表数据
    getRollupList() {
      if (!this.moduleId || !this.category) return
      this.$api.getExamRollupList(
        {
          module_id: this.moduleId,
          category: this.category,
          page: this.$store.getters['paginate/page'],
          count: 10
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getRollupList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.rollupList = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 10,
        total: data.total
      })
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    changeCategory(data) {
      this.category = data.cid
      this.moduleId = data.mid
      this.getRollupList()
    },
    clickDetails(id, paper_id) {
      this.$router.push({
        path: '/exam/rollup/details',
        query: {
          rollup_id: id,
          paper_id: paper_id
        }
      })
    },
    clickAnswer(id, paper_id) {
      this.$router.push({
        path: '/exam/rollup/topic',
        query: {
          rollup_id: id,
          paper_id: paper_id
        }
      })
    },
    // 购买
    handleUserBuy(id) {
      this.$globalToLogin(() => {
        this.$router.push({
          path: '/buy/exam',
          query: {
            id: id,
            type: 'rollup'
          }
        })
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.rollup-wrapper {
  margin-top: 10px;
  .rollup-list {
    .item {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 30px;
      background-color: #ffffff;
      .content {
        width: 560px;
        .title {
          font-size: 16px;
          font-weight: 500;
          color: $text-color-import;
          cursor: pointer;
        }
        .sum {
          margin-top: 12px;
          span {
            font-size: 13px;
            font-weight: 400;
            color: $text-color-auxiliary;
            margin-right: 30px;
          }
        }
        .intro {
          margin-top: 8px;
          font-size: 13px;
          font-weight: 400;
          color: #909399;
          line-height: 20px;
        }
      }
      .operate {
        display: flex;
        align-items: center;
        .price,
        .free {
          font-size: 14px;
          font-weight: 500;
          margin-right: 42px;
        }
        .price {
          color: $text-color-price;
        }
        .free {
          color: $text-color-free;
        }
        .el-button {
          width: 94px;
        }
      }
    }
  }
  .rollup-no-data {
    padding: 50px 0;
    background-color: #ffffff;
  }
}
</style>
